<template>
  <div class="swiper">
    <div class="container">
      <ul
        ref="imgBox"
        @transitionend="animateEnd"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      >
        <!-- 过渡结束事件、开始触摸、触摸移动和触摸结束事件 -->
        <!-- 为了实现无缝循环滚动需要在li前后分别复制最后一张图片和第一张图片 -->
        <li>
          <a :href="banner[banner.length - 1].link"
            ><img :src="banner[banner.length - 1].url" alt=""
          /></a>
        </li>
        <li v-for="(item, index) in banner" :key="index">
          <a :href="item.link"><img :src="item.url" alt="" /></a>
        </li>
        <li>
          <a :href="banner[0].link"><img :src="banner[0].url" alt="" /></a>
        </li>
      </ul>
    </div>
    <div class="circle">
      <ol>
        <li
          v-for="(item, index) in banner"
          :key="index"
          :class="{ current: index === circleIndex }"
        ></li>
      </ol>
    </div>
  </div>
</template>

<script>
import pixel from '../utils/pixel'
export default {
  props: {
    banner: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      flag: true, // 节流阀 防止快速滑动
      circleIndex: 0, // 当前展示图片对应圆点
      imgIndex: 0, // 当前展示图片
      timer: null, // 圆点定时器
      imgWidth: 0, // 图片宽度
      startX: 0, // 手指开始触摸位置
      moveX: 0, // 手指移动距离
      interval: 2000, // 滚动间隔时间
    }
  },
  methods: {
    animateEnd() {
      // 过渡结束事件
      if (this.imgIndex >= this.banner.length) {
        // 判断当前图片索引是否为最后一张图
        this.imgIndex = 0
        this.$refs.imgBox.style.transition = 'none' // 迅速跳转至第一张图
        this.$refs.imgBox.style.transform = `translateX(-${pixel(
          this.imgWidth
        )})`
      }
      if (this.imgIndex < 0) {
        // 判断当前图片索引是否为第一张图
        this.imgIndex = this.banner.length - 1
        this.$refs.imgBox.style.transition = 'none' // 迅速跳转至最后一张图
        this.$refs.imgBox.style.transform = `translateX(${pixel(
          this.translateX
        )})`
      }
      this.flag = true // 打开节流阀
    },
    touchstart(event) {
      // 手指开始触摸事件
      clearInterval(this.timer) // 关闭自动轮播
      if (this.flag) {
        this.startX = event.targetTouches[0].clientX // 获取开始触摸位置
      }
    },
    touchmove(event) {
      // 手指开始移动
      if (this.flag) {
        this.moveX = event.targetTouches[0].clientX - this.startX // 手指移动位置
        this.$refs.imgBox.style.transition = 'none' // 图片ul跟随手指移动
        this.$refs.imgBox.style.transform = `translateX(${pixel(
          this.translateX + this.moveX
        )})`
      }
    },
    touchend(event) {
      // 结束触摸
      if (this.flag) {
        if (this.moveX > 80) {
          // 移动距离大于80，图片索引--
          this.imgIndex--
          this.circleIndex--
        } else if (this.moveX < -80) {
          // 移动距离小于-80，图片索引++
          this.imgIndex++
          this.circleIndex++
        }
        this.$refs.imgBox.style.transition = 'all 1s' // 展示当前索引图片
        this.$refs.imgBox.style.transform = `translateX(${pixel(
          this.translateX
        )})`
      }
      // 触摸事件完成，继续自动轮播
      clearInterval(this.timer) // 防止定时器叠加
      this.timer = setInterval(() => {
        this.imgIndex++
        this.circleIndex++
        this.$refs.imgBox.style.transition = 'all 1s'
        this.$refs.imgBox.style.transform = `translateX(${pixel(
          this.translateX
        )})`
      }, this.interval)
      this.flag = false // 关闭节流阀，等待动画完成
    },
  },
  watch: {
    circleIndex() {
      // 监视原点索引变化
      if (this.circleIndex >= this.banner.length) {
        this.circleIndex = 0
      }
      if (this.circleIndex < 0) {
        this.circleIndex = this.banner.length - 1
      }
    },
  },
  computed: {
    translateX() {
      // 计算图片ul当前距离
      return -(this.imgWidth + this.imgWidth * this.imgIndex)
    },
  },
  mounted() {
    // console.log(this.banner)
    this.imgWidth = 714 // 获取图片宽度window.innerWidth
    // console.log(this.imgWidth)
    // ul先左移动一个图片距离，显示第一张图片
    this.$refs.imgBox.style.transform = `translateX(-${pixel(this.imgWidth)})`
    this.timer = setInterval(() => {
      // 自动轮播
      this.imgIndex++
      this.circleIndex++
      this.$refs.imgBox.style.transition = 'all 1s ease-in-out' // 切换下一张图片
      this.$refs.imgBox.style.transform = `translateX(${pixel(
        this.translateX
      )})`
    }, this.interval)
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
ul,
ol {
  list-style: none;
}
.swiper {
  width: 100%;
  height: 100%;
  // background-color: #f40068;
  overflow: hidden;
  .container {
    width: 100%;
    height: 100%;
    ul {
      width: 700%;
      height: 100%;
      display: flex;
      li {
        width: 20%;
        height: 100%;
        margin: 0 rem(10);
        img {
          width: 100%;
          height: 100%;
          border-radius: rem(20);
          overflow: hidden;
        }
      }
    }
  }
  .circle {
    height: rem(6);
    position: relative;
    top: rem(-30);
    display: flex;
    justify-content: center;
    z-index: 3;
    ol {
      height: 100%;
      display: flex;
      li {
        width: rem(6);
        height: rem(6);
        margin: 0 rem(4);
        background-color: #ffffff;
        border-radius: rem(3);
      }
    }
    .current {
      width: rem(16);
    }
  }
}
</style>
